<template>
  <view>
    <tm-message ref="toast"></tm-message>
    <view>
      <tm-form @submit="onSubmit" ref="formData">
        <tm-input placeholder="请输入手机号码" input-type="number" v-model.lazy="reqData.phone" confirm-type="next"
                  :vertical="true" :bg-round="25" :bg-shadow="2" flat prefixp-icon="icon-mobile-alt" :padding="[32,0]"
                  height="80" :font-size="32" :color="$tm.vx.state().tmVuetify.color" maxlength="11">
          <template v-slot:rightBtn>
            <tm-button theme="bg-gradient-blue-accent" @click="sendSms" :round="0" :font-size="24" :height="84" block
                       :width="120">
              <tm-countdown ref="daojishi" :autoStart="false" :time="times*1000" @finish="disabledCuntdown=false">
                <template v-slot:default="{timeData}">
                  {{
                    timeData.finish == false && timeData.data.seconds !== '00' ? '剩' + timeData.data.seconds + '秒' : '验证码'
                  }}
                </template>
              </tm-countdown>
            </tm-button>
          </template>
        </tm-input>
        <tm-gap></tm-gap>
        <view class="py-20"></view>
        <tm-password :code-length="6" :show-val="true" v-model="reqData.code" noval="none" model="box"
                     shadow="5"/>
        <tm-gap></tm-gap>
        <view class="py-20"></view>
        <view class="py-20"></view>
        <tm-button @click="onSubmit" block icon="icon-mobile-alt" :round="24" :icon-size="32" :height="100"
                   :font-size="32">登录
        </tm-button>
      </tm-form>
    </view>
  </view>
</template>

<script>
import {mapActions} from 'vuex';
import * as api from '../api.js'

export default {
  props: {
    isAgreement: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      reqData: {
        phone: '',
        code: ''
      },
      num: '',
      disabledCuntdown: false,
      times: 60
    }
  },
  methods: {
    //手机号登录
    sendSms() {
      if (!this.isAgreement) {
        this.$refs.toast.show({model: 'quest', label: '请先阅读并同意协议条款'})
        return
      }
      if (this.reqData.phone && this.$tm.test.mobile(this.reqData.phone)) {
        console.log(1112, this.disabledCuntdown)
        if (!this.disabledCuntdown) {
          this.disabledCuntdown = true
          this.$refs.daojishi.start()
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          api.sendSms({"phone": this.reqData.phone}).then(res => {
            uni.hideLoading();
            this.$refs.daojishi.start()
            this.$refs.toast.show({model: 'success', label: '验证码已发送!'});
          }).catch(errors => {
            uni.hideLoading();
            this.$refs.toast.show({model: 'error', label: '发送失败~'});
            this.$refs.daojishi.resinit()
            this.disabledCuntdown = false
          })
        }
      } else {
        this.$refs.toast.show({model: 'quest', label: '请填写正确的手机号'});
      }

    },
    /**
     * 提交登录
     */
    async onSubmit(e) {
      if (!this.isAgreement) {
        this.$refs.toast.show({model: 'quest', label: '请先阅读并同意协议条款'})
        return
      }
      if (!this.reqData.phone) {
        this.$refs.toast.show({model: 'error', label: '请填写正确的手机号'})
      } else if (!this.reqData.code || this.reqData.code.length !== 6) {
        this.$refs.toast.show({model: 'error', label: '请填写正确的验证码'})
      } else {
        uni.showLoading({
          title: '登录中...'
        });
        this.$dvadminStore.dispatch('phoneLogin', {
          phone: this.reqData.phone,
          code: this.reqData.code,
        }).then(res => {
          uni.reLaunch({
            url: '/pages/index/index'
          });
          this.$refs.toast.show({model: 'success', label: '登录成功'});
        }).catch(err => {
        })
      }
    }
  },
  created() {
  }
}
</script>

<style>
.grey-darken-3 {
  background-color: none !important;
}
</style>
